/* 菠萝 TODO 待补充代码 */
.yellow {
  order: 1;
  align-self: flex-end;
}

/* 以下代码不需要修改 */
#board {
  position: sticky;
  top: 0;
  width: 50vw;
  height: 50vw;
  min-width: 300px;
  min-height: 300px;
  max-width: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

#pond {
  z-index: 20;
}

#pond,
#background {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
}

.lilypad,
.frog {
  position: relative;
  width: 20%;
  height: 20%;
  overflow: hidden;
}

.frog.green .bg {
  background-image: url(./img/1.png);
}

.frog.yellow .bg {
  background-image: url(./img/2.png);
}

.frog .bg {
  background-size: 60% 60%;
}

.lilypad .bg,
.frog .bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.lilypad.green .bg {
  border-radius: 50%;
  background: #9b100a;
  opacity: 0.5;
}

.lilypad .bg,
.frog .bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

* {
  box-sizing: border-box;
}

.lilypad.yellow .bg {
  border-radius: 50%;
  background: #863a1b;
  opacity: 0.5;
}
